<template>
  <div class="mange-device">
    <div class="tabs-slide">
      <div class="tabs">
        <div class="menus" :class="{ 'menus-active': slide }">
          <a href="javascript:;" @click="onClickSlideLeft">
            <svg-icon iconClass="menu" />
          </a>
        </div>
        <div class="tab-tab-warp">
          <div
            v-for="(items, index) in tabs"
            :key="index"
            class="tab-tab"
            @click="onClickTab(items.name)"
          >
            <svg-icon :iconClass="items.icon" />
            <span v-if="items.name != '导入'" class="title">{{
              items.name
            }}</span>
            <el-upload
              v-if="items.name == '导入'"
              ref="upload"
              action=""
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              :multiple="false"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
              :auto-upload="false"
            >
              <span class="title">{{ items.name }}</span>
            </el-upload>
            <!-- 弹窗部分-视图 -->
            <div
              class="view-pup-wrap"
              v-if="isShowViewPup == true && items.name == '视图'"
              @click.stop=""
            >
              <div class="close-btn" @click="closeViewPup">X</div>
              <vxe-input class="search" placeholder="">
                <template #prefix>
                  <i class="vxe-icon--search"></i>
                </template>
              </vxe-input>
              <div class="row">
                <div>默认视图筛选</div>
                <div @click="restoreDefault">恢复默认</div>
              </div>
              <vxe-checkbox
                v-for="(item, index) in _tableColumn"
                :key="index"
                :content="item.title"
                :label="index"
                v-model="item.checked"
                @change="checkFillter(item)"
                v-show="index != 0 && index != _tableColumn.length - 1"
              ></vxe-checkbox>
            </div>
            <!-- 弹窗部分-新建 -->
            <div
              class="new-pup-wrap"
              v-if="isShowNewPup == true && items.name == '新建'"
              @click.stop=""
              v-drag
            >
              <div class="head">
                <div class="lf">新建</div>
                <div class="rt" @click.stop="closeNewPup">X</div>
              </div>
              <div class="body">
                <div class="tabs">
                  <div
                    class="item"
                    :class="{ active: current == 1 }"
                    @click="newTabClick(1)"
                  >
                    资产信息
                  </div>
                  <div
                    class="item"
                    :class="{ active: current == 2 }"
                    @click="newTabClick(2)"
                  >
                    团体字信息
                  </div>
                  <div
                    class="item"
                    :class="{ active: current == 3 }"
                    @click="newTabClick(3)"
                  >
                    设备登录信息
                  </div>
                </div>
                <!-- 资产信息 -->
                <div class="tabs-cont" v-if="current == 1">
                  <div class="row">
                    <div class="lf">全部分类：</div>
                    <div class="rt">
                      <el-select
                        v-model="categoriesValue"
                        placeholder="选择分类"
                      >
                        <el-option
                          v-for="item in types"
                          :key="item.className"
                          :label="item.className"
                          :value="item.className"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <!-- <div class="row">
                    <div class="lf">品牌：</div>
                    <div class="rt">
                      <el-select v-model="brandValue" placeholder="选择品牌">
                        <el-option
                          v-for="item in brandOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">型号：</div>
                    <div class="rt">
                      <el-input v-model="modelValue" placeholder=""></el-input>
                    </div>
                  </div> -->
                  <div class="row">
                    <div class="lf">名称：</div>
                    <div class="rt">
                      <el-input v-model="nameValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">IP地址：</div>
                    <div class="rt">
                      <el-input v-model="ipValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">机房：</div>
                    <div class="rt">
                      <el-input
                        v-model="machineRoomValue"
                        placeholder=""
                      ></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">所在机柜：</div>
                    <div class="rt">
                      <el-input
                        v-model="cabinetValue"
                        placeholder=""
                      ></el-input>
                    </div>
                  </div>
                  <!-- <div class="row">
                    <div class="lf">方向：</div>
                    <div class="rt">
                      <el-select
                        v-model="directionValue"
                        placeholder="选择方向"
                      >
                        <el-option
                          v-for="item in directionOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">U位：</div>
                    <div class="rt">
                      <el-input v-model="uValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">端口数量：</div>
                    <div class="rt">
                      <a href="javascript:;" style="color: #1573ff">添加</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">监控项：</div>
                    <div class="rt">
                      <a href="javascript:;" style="color: #a93aaa">添加</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">状态：</div>
                    <div class="rt">
                      <span>
                        <svg-icon
                          icon-class="status1"
                          style="height: 10px"
                        ></svg-icon>
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">配置文件：</div>
                    <div class="rt">
                      <span>
                        <svg-icon icon-class="shezhi2"></svg-icon>
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">描述：</div>
                    <div class="rt">
                      <el-input v-model="desValue" placeholder=""></el-input>
                    </div>
                  </div> -->
                  <div class="row">
                    <div class="lf">序列号：</div>
                    <div class="rt">
                      <el-input
                        v-model="serialNumValue"
                        placeholder=""
                      ></el-input>
                    </div>
                  </div>
                  <!-- <div class="row">
                    <div class="lf">系统OID：</div>
                    <div class="rt">
                      <el-input v-model="OIDValue" placeholder=""></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">自定义字段：</div>
                    <div class="rt">
                      <el-select
                        v-model="directionValue"
                        placeholder="自定义字段选择"
                      >
                        <el-option
                          v-for="item in directionOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span class="add-btn">
                        <svg-icon icon-class="add3"></svg-icon>
                      </span>
                    </div>
                  </div> -->
                </div>
                <!-- 团体字信息 -->
                <div class="tabs-cont" v-if="current == 2">
                  <div class="row">
                    <div class="lf">读团体字：</div>
                    <div class="rt">
                      <el-input
                        placeholder=""
                        v-model="readCommunity"
                      ></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">写团体字：</div>
                    <div class="rt">
                      <el-input
                        placeholder=""
                        v-model="writeCommunity"
                      ></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">SNMP版本：</div>
                    <div class="rt">
                      <el-input placeholder="" value="v2c"></el-input>
                    </div>
                  </div>
                </div>
                <!-- 设备登录信息 -->
                <div class="tabs-cont" v-if="current == 3">
                  <div class="row">
                    <div class="lf">用户名：</div>
                    <div class="rt">
                      <el-input placeholder="" v-model="userName"></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">密码：</div>
                    <div class="rt">
                      <el-input
                        placeholder=""
                        show-password
                        v-model="passwd"
                      ></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">Super密码：</div>
                    <div class="rt">
                      <el-input
                        placeholder=""
                        show-password
                        v-model="superPasswd"
                      ></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">登录方式：</div>
                    <div class="rt">
                      <el-select
                        v-model="mode"
                        placeholder="登录方式"
                        @change="loginMethod"
                      >
                        <el-option label="ssh" value="ssh"> </el-option>
                        <el-option label="telnet" value="telnet"> </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">设备厂商：</div>
                    <div class="rt">
                      <el-select v-model="factory" placeholder="设备厂商">
                        <el-option label="华为" value="华为" />
                        <el-option label="华三" value="华三" />
                        <el-option label="迪普" value="迪普" />
                        <el-option label="中兴" value="中兴" />
                        <el-option label="锐捷" value="锐捷" />
                        <el-option label="其他" value="其他" />
                      </el-select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">设备型号：</div>
                    <div class="rt">
                      <el-input placeholder="" v-model="type"></el-input>
                    </div>
                  </div>
                  <div class="row">
                    <div class="lf">登录端口：</div>
                    <div class="rt">
                      <el-input
                        placeholder=""
                        v-model="port"
                        readonly
                      ></el-input>
                    </div>
                  </div>
                </div>
                <div class="btn-wrap">
                  <button class="cancel-btn" @click.stop="closeNewPup">
                    取消
                  </button>
                  <button class="confirm-btn" @click.stop="addDeviceConfirm">
                    确定
                  </button>
                </div>
              </div>
            </div>
            <!-- 弹窗部分-批量修改 -->
            <div
              class="amend-pup-wrap"
              v-if="isShowAmendPup == true && items.name == '批量修改'"
              @click.stop=""
            >
              <div class="head">
                <div class="lf">批量修改字段</div>
                <div class="rt" @click.stop="closeAmendPup">X</div>
              </div>
              <div class="body">
                <el-select v-model="field" placeholder="选择列" size="mini">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  size="mini"
                  placeholder="输入规则"
                  v-model="inputValue"
                ></el-input>
              </div>
              <div class="foot">
                <button @click.stop="closeAmendPup">取消</button>
                <button @click.stop="amend">修改</button>
              </div>
            </div>
          </div>
        </div>

        <div class="content" :class="{ 'content-active': slide }">
          <!-- 右侧内容 -->
          <manage-list
            :types="types"
            :brands="brands"
            :list="list"
            :tableColumn="tableColumn"
            :_loading="loading"
            ref="manageList"
            v-if="isRefresh"
          ></manage-list>
        </div>
      </div>
      <div class="slide" :class="{ 'slide-active': slide }">
        <div class="slide-top">
          <span href="javascript:;" @click="onClickSlideLeft">
            <svg-icon iconClass="menu" />
          </span>
          <span
            class="slide-top-title"
            @click="change('all')"
            style="cursor: pointer"
            >设备类型</span
          >
        </div>
        <el-menu
          :default-active="menuIndex"
          @open="onOpenMenu"
          @close="onCloseMenu"
        >
          <el-submenu
            v-for="(items, index) in menus"
            :key="index"
            :index="`${index}`"
          >
            <template slot="title">
              <img
                class="icon"
                src="@/assets/images/home.png"
                alt=""
                srcset=""
              />
              <div class="title">
                {{ items.className }}
              </div>
            </template>
            <el-menu-item
              v-for="(value, i) in items.subclass"
              :key="i"
              :index="`${index}${i}`"
              @click="change(value.className)"
            >
              <!-- <svg-icon :iconClass="value.icon" /> -->
              <img
                class="icon"
                src="@/assets/images/right.png"
                alt=""
                srcset=""
              />
              <div class="sub-title">
                {{ value.className }}
              </div>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="new-device-type">
          <svg-icon icon-class="add4"></svg-icon>
          新建设备类型
        </div>
      </div>
    </div>

    <!-- 弹窗部分-拓扑 -->
    <div
      class="topology-pup-wrap"
      v-if="isShowSearchPup == true"
      @click.stop=""
    >
      <div class="close-btn" @click.stop="closeSearchPup">X</div>
      <div class="topology-cont">
        <div class="title">设备IP查询</div>
        <vxe-input
          class="search"
          placeholder=""
          suffix-icon="vxe-icon--search"
          v-model="searchKey"
          @keyup.enter.native="topologySearch(searchType)"
        ></vxe-input>
      </div>
    </div>

    <!-- 终端搜索结果弹窗 -->
    <div class="result-pup terminal-pup" v-if="isShowTerminalPup">
      <div class="head">
        <div class="lf">终端IP {{ terminalData.hostIp }}</div>
        <div class="rt" @click="closeTerminalPup">X</div>
      </div>
      <div class="body">
        {{ terminalData.HostIp }}
        <vxe-table
          class="device-list"
          ref="terminalTable"
          stripe
          :height="'400px'"
          border="none"
          header-row-class-name="vux-table-header"
          :data="terminalData.ipMac"
          :cell-class-name="cellClassName"
        >
          <vxe-table-column type="seq" title="序号" width="50" />
          <vxe-table-column
            field="hostIp"
            title="IP"
            min-width="60"
            show-overflow
          />
          <vxe-table-column
            field="hostName"
            title="主机名"
            min-width="40"
            show-overflow
          />
          <vxe-table-column field="port" title="端口" min-width="40" />
          <vxe-table-column
            field="ip"
            title="接入设备IP地址"
            min-width="60"
            show-overflow
          />
          <vxe-table-column
            field="name"
            title="接入主机名"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="mac"
            title="接入mac地址"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="type"
            title="类型"
            min-width="40"
            show-overflow
          />
        </vxe-table>
      </div>
    </div>
    <!-- 拓扑搜索结果弹窗 -->
    <div class="result-pup topology-pup" v-if="isShowTopologyPup">
      <div class="head">
        <div class="lf">IP {{ topologyData.hostIp }}</div>
        <div class="rt" @click="closeTopologyPup">X</div>
      </div>
      <div class="body">
        <vxe-table
          class="device-list"
          ref="topologyTable"
          stripe
          :height="'400px'"
          border="none"
          header-row-class-name="vux-table-header"
          :data="topologyData.localAndRemoteInterfaceList"
          :cell-class-name="topologyCellClassName"
        >
          <vxe-table-column type="seq" title="序号" width="50" />
          <vxe-table-column
            field="hostIp"
            title="IP"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="hostName"
            title="本端设备名"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="localInterfaceName"
            title="端口"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="remoteHostIp"
            title="对端设备IP地址"
            min-width="50"
            show-overflow
          />
          <vxe-table-column
            field="remoteInterfaceName"
            title="对端设备端口"
            min-width="40"
            show-overflow
          />
          <vxe-table-column
            field="time"
            title="时间"
            min-width="40"
            show-overflow
          />
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import manageList from "@/components/manageList.vue";

import {
  getNodeview,
  getArp,
  getLldp,
  putNodeDelete,
  getPasswdDelete,
  putSnmpDelete,
  putNodeUpdate,
} from "@/api/manage";
import {
  getClassThree,
  getClassLeaf,
  putNodeInsert,
  putInsertSnmp,
  putPasswdInsert,
} from "@/api/find";

@Component({
  components: {
    manageList,
  },
})
export default class result extends Vue {
  [x: string]: any;
  // 传给子组件的参数
  public loading: Boolean = false;
  public types: Array<any> = [];
  //列
  public tableColumn: Array<any> = [
    {
      checked: true,
      width: 50,
      slots: {
        header: "checkbox_header",
        default: "checkbox_default",
      },
    },
    {
      checked: true,
      type: "seq",
      title: "序号",
      width: 50,
      slots: { default: "seq_default" },
    },
    {
      checked: true,
      field: "nodeClass",
      title: "全部分类",
      width: 100,
      showOverflow: true,
      slots: { header: "type_header", default: "type_default" },
    },
    {
      checked: true,
      field: "brand",
      title: "品牌",
      width: 100,
      showOverflow: true,
      slots: { header: "brand_header", default: "brand_default" },
    },
    {
      checked: true,
      field: "model",
      title: "型号",
      showOverflow: true,
      slots: { default: "model_default" },
    },
    {
      checked: true,
      field: "hostName",
      title: "主机名",
      showOverflow: true,
    },
    {
      checked: true,
      field: "name",
      title: "设备名称",
      showOverflow: true,
      slots: { default: "name_default" },
    },
    {
      checked: true,
      field: "ip",
      title: "IP地址",
      showOverflow: true,
      slots: { default: "ip_default" },
    },
    {
      checked: true,
      field: "port",
      title: "端口数量",
      slots: {
        default: "port_default",
      },
    },
    {
      checked: true,
      field: "monitoring",
      title: "监控项",
      slots: {
        default: "monitoring_default",
      },
    },
    {
      checked: true,
      field: "state",
      title: "状态",
      slots: {
        default: "state_default",
      },
    },
    {
      checked: true,
      field: "config",
      title: "配置文件",
      slots: {
        default: "config_default",
      },
    },
    {
      checked: true,
      field: "desc",
      title: "描述",
      showOverflow: true,
    },
    {
      checked: true,
      field: "odi",
      title: "系统OID",
      showOverflow: true,
    },
    {
      checked: true,
      width: 110,
      slots: {
        header: "custom_header",
      },
    },
  ];
  public brands: Array<any> = [
    {
      label: "HP",
      value: 1,
    },
    {
      label: "Huawei",
      value: 2,
    },
    {
      label: "Dell",
      value: 3,
    },
    {
      label: "H3C",
      value: 1,
    },
  ];

  public list: Array<any> = [];
  public listData: Array<any> = []; //原始数据，用于筛选

  public tabIndex: number = 0;

  public slide: boolean = false;
  public current: number = 1; //新建弹窗tab切换
  public menuIndex: string = null;
  public isShowViewPup: boolean = false;
  public isShowNewPup: boolean = false;
  public isShowAmendPup: boolean = false;
  public isShowSearchPup: boolean = false;
  public isShowTopologyPup: boolean = false;
  public isShowTerminalPup: boolean = false;
  public searchType: String = "";
  public searchKey: String = "";

  public isRefresh: boolean = true; //子组件是否刷新
  public terminalData: Array<any> = []; //搜索终端数据
  public topologyData: Array<any> = []; //搜索拓扑数据

  //新建弹窗
  // 资产信息
  public ipValue: string = ""; //新建ip
  public categoriesValue: string = ""; //全部分类
  public nameValue: string = ""; //名称
  public machineRoomValue: string = ""; //机房
  public cabinetValue: string = ""; //所在机柜
  public serialNumValue: string = ""; //序列号
  //团体字信息
  public readCommunity: string = ""; //读团体字
  public writeCommunity: string = ""; //写团体字
  //设备登录信息
  public userName: string = ""; //用户名
  public passwd: string = ""; //密码
  public superPasswd: string = ""; //super密码
  public mode: string = ""; //登录方式
  public type: string = ""; //设备型号
  public factory: string = ""; //设备厂商
  public port: string = ""; //登录端口

  public viewCheckBoxData: Array<any> = [];

  public options: Array<any> = [
    {
      label: "设备名称",
      value: "name",
    },
    {
      label: "描述",
      value: "hostDesc",
    },
  ];
  public field: string = "";
  public inputValue: string = "";
  public viewCheckBox: Array<any> = [];

  public tabs: Array<any> = [
    {
      name: "视图",
      value: 0,
      icon: "view",
    },
    {
      name: "新建",
      value: 1,
      icon: "add2",
    },
    {
      name: "批量修改",
      value: 2,
      icon: "amend2",
    },
    {
      name: "克隆",
      value: 3,
      icon: "clone",
    },
    {
      name: "删除",
      value: 4,
      icon: "del2",
    },
    {
      name: "导入",
      value: 5,
      icon: "import",
    },
    {
      name: "导出",
      value: 6,
      icon: "import",
    },
    {
      name: "同步",
      value: 7,
      icon: "synchronization",
    },
    {
      name: "终端",
      value: 8,
      icon: "terminal",
    },
    {
      name: "拓扑",
      value: 9,
      icon: "topology",
    },
  ];

  public menus: Array<any> = [];
  public checkList: Array<any> = [];
  public _tableColumn: Array<any> = [];
  public deviceData: Array<any> = []; //设备管理原始数据

  $router: any;

  public created() {
    // 获取设备列表
    this.getNodeview();
    this._tableColumn = this.tableColumn;
  }

  public handleAvatarSuccess() {
    console.log(111111111111111111);
  }

  // 视图分类筛选
  public checkFillter() {
    this.$refs.manageList.findList();
  }

  // 视图分类筛选恢复默认
  public restoreDefault() {
    this._tableColumn.map((item) => {
      item.checked = true;
    });
    this.$refs.manageList.findList();
  }

  // 登录方式下拉框
  public loginMethod(e: any) {
    console.log(e);
    if (e == "ssh") {
      this.port = "22";
    } else if (e == "telnet") {
      this.port = "23";
    }
  }

  // 获取设备列表
  public getNodeview() {
    let that = this;
    that.loading = true;
    getNodeview({}).then((res: any) => {
      if (res.data.view.length > 0) {
        let data = res.data.view;
        console.log("res.data", data);
        let _list = [];
        for (let i = 0; i < data.length; i++) {
          let obj = {
            checked: false,
            ip: "",
            id: "",
            nodeClass: "",
            brand: "",
            model: "",
            hostName: "",
            name: "",
            port: "",
            monitoring: "",
            state: "",
            config: "",
            odi: "",
            desc: "",
          };
          obj.checked = false;
          obj.ip = data[i].ip;
          obj.model =
            data[i].deviceType.vendorName + data[i].deviceType.modelNumber;
          obj.brand = data[i].deviceType.vendorNameEn;
          obj.monitoring = data[i].oidProperty.length;
          obj.odi = data[i].deviceType.sysOid;
          obj.oidProperty = data[i].oidProperty;

          for (let j = 0; j < data[i].oidProperty.length; j++) {
            if (data[i].oidProperty[j].propertyName == "端口数") {
              obj.port = data[i].oidProperty[j].value;
            } else if (data[i].oidProperty[j].propertyName == "系统描述") {
              obj.desc = data[i].oidProperty[j].value;
            } else if (data[i].oidProperty[j].propertyName == "主机名") {
              obj.hostName = data[i].oidProperty[j].value;
            }
          }
          for (let j = 0; j < data[i].preDefinedProperty.length; j++) {
            if (data[i].preDefinedProperty[j] != undefined) {
              obj.nodeClass = data[i].preDefinedProperty[j].nodeClass;
              obj.state = data[i].preDefinedProperty[j].state;
              console.log(data[i].preDefinedProperty[j]);

              obj.name = data[i].preDefinedProperty[j].name;
              obj.id = data[i].preDefinedProperty[j].id;
            }
          }
          _list.push(obj);
        }
        this.list = _list;
        this.listData = _list;
        console.log("*****", this.list);
      }

      // 获取左侧树形分类列表
      getClassThree({}).then((res) => {
        // console.log(res.data);
        this.menus = res.data;
      });
      // 获取分类列表
      getClassLeaf({}).then((res) => {
        // console.log(res.data);
        this.types = res.data;
      });

      // that.list.push(_list);
      that.isRefresh = false;
      that.$nextTick(() => {
        that.isRefresh = true;
      });
      that.loading = false;
    });
  }

  public onClickTab(e: any) {
    this.selectedData = this.$refs.manageList.selectedData;
    console.log("选中", this.selectedData);
    console.log("tab点击", e);
    switch (e) {
      case "视图":
        console.log("视图");
        this.isShowViewPup = true;
        break;
      case "新建":
        console.log("新建");
        this.isShowNewPup = true;
        break;
      case "批量修改":
        console.log("批量修改");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          this.isShowAmendPup = true;
        }
        break;
      case "克隆":
        console.log("克隆", this.selectedData);
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          JSON.parse(JSON.stringify(this.selectedData)).map((item: any) => {
            item.isEdit = true;
            this.list.unshift(item);
            this.$forceUpdate();
          });
          this.list.map((item) => {
            item.checked = false;
          });
          console.log("克隆后的this.data", this.list);
          this.isRefresh = false;
          this.$nextTick(() => {
            this.isRefresh = true;
          });
        }
        break;
      case "删除":
        console.log("删除");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          console.log("this.selectedData", this.selectedData);

          let arr = [];
          this.selectedData.map((item: any) => {
            let obj = { ip: "", name: "" };
            obj.ip = item.ip;
            obj.name = item.name;
            arr.push(obj);
          });
          this.$confirm("此操作将删除所选设备, 是否继续?", "提示", {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              putNodeDelete(arr).then((res) => {
                console.log("putNodeDelete", res.data);
              });
              getPasswdDelete(arr).then((res) => {
                console.log("getPasswdDelete", res.data);
              });
              putSnmpDelete(arr).then((res) => {
                console.log("putSnmpDelete", res.data);
              });
              this.$message({
                showClose: true,
                message: "删除成功！",
                type: "success",
              });
              this.getNodeview();
              this.isRefresh = false;
              this.$nextTick(() => {
                this.isRefresh = true;
              });
            })
            .catch(() => {
              this.$message({
                showClose: true,
                type: "error",
                message: "删除失败",
              });
            });
        }
        break;
      case "导入":
        console.log("导入");
        // this.$refs.manageList.importDataEvent();//触发子组件里的导出方法
        break;
      case "导出":
        console.log("导出");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          // this.$refs.manageList.exportSelectEvent(); //触发子组件里的导出方法
          this.exportSelectEvent(); //触发子组件里的导出方法
        }
        break;
      case "同步":
        console.log("同步");
        this.getNodeview();
        this.isRefresh = false;
        this.$nextTick(() => {
          this.isRefresh = true;
        });
        break;
      case "终端":
        console.log("终端");
        this.searchKey = "";
        this.isShowSearchPup = true;
        this.searchType = "终端";
        break;
      case "拓扑":
        console.log("拓扑");
        this.searchKey = "";
        this.isShowSearchPup = true;
        this.searchType = "拓扑";
        break;
    }
  }

  // 导出数据
  public exportSelectEvent() {
    console.log("导出数据", this.selectedData);
    require.ensure([], () => {
      const { export_json_to_excel } = require("@/utils/Export2Excel");
      const tHeader = [
        "全部分类",
        "品牌",
        "型号",
        "主机名",
        "设备名称",
        "IP地址",
        "端口数量",
        "监控项",
        "状态",
        "配置文件",
        "描述",
        "系统OID",
      ];
      const filterVal = [
        "nodeClass",
        "brand",
        "model",
        "hostName",
        "name",
        "ip",
        "port",
        "monitoring",
        "state",
        "config",
        "desc",
        "odi",
      ];
      const list = this.selectedData; //导出的数据
      const data = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, "设备管理"); //导出文件名称
    });
  }
  public formatJson(filterVal: any, jsonData: any) {
    return jsonData.map((v: any) => filterVal.map((j: any) => v[j]));
  }

  // 导入数据
  public handleChange(file: any, fileList: any) {
    this.fileTemp = file.raw;
    this.importDataEvent();
  }
  // 导入判断
  public importDataEvent() {
    if (this.fileTemp) {
      if (
        this.fileTemp.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        this.fileTemp.type == "application/vnd.ms-excel"
      ) {
        this.importfxx(this.fileTemp);
      } else {
        this.$message({
          type: "error",
          message: "附件格式错误，请删除后重新上传！",
        });
      }
    } else {
      this.$message({
        type: "error",
        message: "请上传附件！",
      });
    }
  }
  // 导入函数
  importfxx(obj: any) {
    let that = this;
    // 通过DOM取文件数据
    that.file = obj;
    var rABS = false; //是否将文件读取为二进制字符串
    var f = that.file;
    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function (f) {
      var binary = "";
      var rABS = false; //是否将文件读取为二进制字符串
      var pt = that;
      var wb; //读取完成的数据
      var outdata;
      var reader = new FileReader();
      reader.onload = function (e) {
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for (var i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        var XLSX = require("xlsx");
        if (rABS) {
          wb = XLSX.read(btoa(fixdata(binary)), {
            //手动转化
            type: "base64",
          });
        } else {
          wb = XLSX.read(binary, {
            type: "binary",
          });
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
        let da = [...outdata];
        let arr = [];
        da.map((v: any) => {
          let obj = {};
          obj.nodeClass = v["全部分类"];
          obj.brand = v["品牌"];
          obj.model = v["型号"];
          obj.hostName = v["主机名"];
          obj.name = v["设备名称"];
          obj.ip = v["IP地址"];
          obj.port = v["端口数量"];
          obj.monitoring = v["监控项"];
          obj.state = v["状态"];
          obj.config = v["配置文件"];
          obj.desc = v["描述"];
          obj.odi = v["系统OID"];
          arr.push(obj);
        });
        arr.map((item) => {
          let userDefinedPropertyList = [
            {
              nodeIp: item.ip,
              nodeName: item.name,
              propertyName: "默认值",
              propertyValue: "default",
            },
          ];
          item.userDefinedPropertyList = userDefinedPropertyList;
        });

        console.log("arr", arr);

        putNodeInsert(arr).then((res: any) => {
          if (res.data.result == "success") {
            that.$message({
              showClose: true,
              message: "导入成功！",
              type: "success",
            });
            that.getNodeview();
          } else {
            that.$message({
              showClose: true,
              message: "导入失败！",
              type: "error",
            });
          }
        });

        // that.$refs.upload.clearFiles(); //上传成功之后清除历史记录

        return arr;
      };
      reader.readAsArrayBuffer(f);
    };

    if (rABS) {
      reader.readAsArrayBuffer(f);
    } else {
      reader.readAsBinaryString(f);
    }
  }

  // 新建弹窗tab切换
  public newTabClick(index: number) {
    this.current = index;
  }

  //新建确定提交 1:资产信息 2:团体字信息 3:设备登录信息
  public addDeviceConfirm() {
    //资产信息
    // ipValue: 新建ip
    // categoriesValue: 全部分类
    // nameValue: 名称
    // machineRoomValue: 机房
    // cabinetValue: 所在机柜
    // serialNumValue: 序列号
    //团体字信息
    // readcommunity: 读团体字
    // writecommunity: 写团体字
    //设备登录信息
    // userName: 用户名
    // passwd: 密码
    // superPasswd: string = ""; //super密码
    // mode: 登录方式
    // type: 设备型号
    // factory: 设备厂商
    // port: 登录端口

    // 资产信息请求数据 nodeList
    let nodeList = [
      {
        cabinet: this.cabinetValue,
        ip: this.ipValue,
        name: this.nameValue,
        nodeClass: this.categoriesValue,
        room: this.machineRoomValue,
        serialNumber: this.serialNumValue,
      },
    ];
    //团体字信息请求数据 snmpCommunityList
    let snmpCommunityList = [
      {
        ip: this.ipValue,
        readCommunity: this.readCommunity,
        writeCommunity: this.writeCommunity,
      },
    ];
    //设备登录信息请求参数 passwdList
    let passwdList = [
      {
        factory: this.factory,
        ip: this.ipValue,
        mode: this.mode,
        passwd: this.passwd,
        port: this.port,
        superPasswd: this.superPasswd,
        type: this.type,
        userName: this.userName,
      },
    ];

    if (!this.isValidIP(this.ipValue)) {
      this.$message({
        showClose: true,
        message: "请输入正确的ip!",
        type: "error",
      });
    } else {
      if (nodeList.length > 0) {
        console.log("资产信息");
        if (this.nameValue.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "名称不能为空！",
            type: "error",
          });
        } else {
          putNodeInsert(nodeList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "资产信息新建成功！",
                type: "success",
              });
              this.getNodeview();
            } else {
              this.$message({
                showClose: true,
                message: "资产信息新建失败！",
                type: "error",
              });
            }
          });
        }
      }
      if (snmpCommunityList.length > 0) {
        console.log("团体字信息", this.readCommunity, this.writeCommunity);
        if (this.readCommunity.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "读团体字不能为空！",
            type: "error",
          });
        } else if (this.writeCommunity.trim().length <= 0) {
          this.$message({
            showClose: true,
            message: "写团体字不能为空！",
            type: "error",
          });
        } else {
          putInsertSnmp(snmpCommunityList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "团体字信息新建成功！",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "团体字信息新建失败！",
                type: "error",
              });
            }
          });
        }
      }
      if (passwdList.length > 0) {
        console.log("设备登录信息", passwdList);
        if (
          this.factory.trim().length <= 0 ||
          this.mode.trim().length <= 0 ||
          this.passwd.trim().length <= 0 ||
          this.port.trim().length <= 0 ||
          this.superPasswd.trim().length <= 0 ||
          this.type.trim().length <= 0 ||
          this.userName.trim().length <= 0
        ) {
          this.$message({
            showClose: true,
            message: "请完善信息!",
            type: "error",
          });
        } else {
          putPasswdInsert(passwdList).then((res) => {
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "设备登录信息新建成功！",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "设备登录信息新建失败！",
                type: "error",
              });
            }
          });
        }
      }
      this.isShowNewPup = false;
    }
  }

  //ip地址判断
  public isValidIP(ip: any) {
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    return reg.test(ip);
  }

  // 终端拓扑搜索
  public topologySearch(e: any) {
    if (e == "终端") {
      console.log(this.searchKey);
      if (this.isValidIP(this.searchKey)) {
        getArp({ ip: this.searchKey }).then((res: any) => {
          if (res.data.length <= 0) {
            this.$message({
              showClose: true,
              message: "搜索结果为空!",
              type: "error",
            });
          } else {
            console.log("终端搜索结果", res.data);
            this.isShowTerminalPup = true;
            this.terminalData = res.data;
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "请输入正确的ip!",
          type: "error",
        });
      }
    } else if (e == "拓扑") {
      console.log(this.searchKey);
      if (this.isValidIP(this.searchKey)) {
        getLldp({ ip: this.searchKey }).then((res: any) => {
          if (res.data.length <= 0) {
            this.$message({
              showClose: true,
              message: "搜索结果为空!",
              type: "error",
            });
          } else {
            console.log("拓扑搜索结果", res.data);
            this.isShowTopologyPup = true;
            for (
              let i = 0;
              i < res.data[0].localAndRemoteInterfaceList.length;
              i++
            ) {
              console.log(res.data[0].localAndRemoteInterfaceList[i]);
              res.data[0].localAndRemoteInterfaceList[i].hostIp =
                res.data[0].hostIp;
              res.data[0].localAndRemoteInterfaceList[i].hostName =
                res.data[0].hostName;
              res.data[0].localAndRemoteInterfaceList[i].time =
                res.data[0].time;
            }
            console.log(res.data[0]);

            this.topologyData = res.data[0];
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "请输入正确的ip!",
          type: "error",
        });
      }
    }
  }

  // 关闭修改弹窗
  public closeAmendPup() {
    this.isShowAmendPup = false;
  }
  // 关闭视图弹窗
  public closeViewPup() {
    this.isShowViewPup = false;
  }
  // 关闭终端结果弹窗
  public closeTerminalPup() {
    this.isShowTerminalPup = false;
  }
  // 关闭拓扑结果弹窗
  public closeTopologyPup() {
    this.isShowTopologyPup = false;
  }

  // 关闭终端拓扑搜索弹窗
  public closeSearchPup() {
    this.isShowSearchPup = false;
    this.searchKey = "";
  }

  // 关闭新建弹窗
  public closeNewPup() {
    this.isShowNewPup = false;
  }

  //批量修改
  public amend() {
    console.log("批量修改", this.field + "-" + this.inputValue);
    let key = this.field;
    key = key == "hostType" ? "nodeClass" : key;
    let amendData = this.list.filter(
      (items: { checked: any }) => items.checked === true
    );
    console.log("amendData", amendData);

    if (this.inputValue.trim().length <= 0) {
      this.$message({
        showClose: true,
        message: "规则不能为空！",
        type: "error",
      });
    } else {
      if (key == "nodeClass" || key == "hostName" || key == "name") {
        amendData.map((item) => {
          console.log(item, key);
          console.log("/", item[key]);
          item[key] = this.inputValue;
          item.userDefinedPropertyList = [
            {
              nodeIp: item.ip,
              nodeName: item.name,
              propertyName: "默认值",
              propertyValue: "default",
            },
          ];
        });
        putNodeUpdate(amendData).then((res) => {
          if (res.data.result == "success") {
            this.$message({
              showClose: true,
              message: "批量修改成功！",
              type: "success",
            });
            this.isShowAmendPup = false;
            setTimeout(() => {
              this.getNodeview();
            }, 3000);
          } else {
            this.$message({
              showClose: true,
              message: "批量修改失败！",
              type: "error",
            });
          }
        });
      }
    }
    console.log("amendData", amendData);
  }

  public onClickSlideLeft() {
    this.slide = !this.slide;
  }

  public onOpenMenu(index: string) {
    this.menuIndex = index;
  }

  public onCloseMenu() {
    this.menuIndex = null;
  }
  // 左侧树形菜单
  public change(e: any) {
    console.log(e);
    if (e == "all") {
      this.getNodeview();
      this.isRefresh = false;
      this.$nextTick(() => {
        this.isRefresh = true;
      });
    } else {
      this.list = this.listData.filter(
        (items: { nodeClass: any }) => items.nodeClass === e
      );
      console.log("***", this.list);
      this.isRefresh = false;
      this.$nextTick(() => {
        this.isRefresh = true;
      });
    }
  }

  public cellClassName({ column }) {
    if (column.property === "name") {
      return "col-1";
    } else if (column.property === "port") {
      return "col-1";
    }
  }
  public topologyCellClassName({ column }) {
    if (column.property === "hostName") {
      return "col-2";
    } else if (column.property === "port") {
      return "col-2";
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
/deep/.vxe-header--column .vxe-resizable
  display none
// 侧边导航样式重置
/deep/.el-icon-arrow-down:before
  content '\e790'
/deep/.el-submenu__icon-arrow
  font-size 16px
  right auto
  left 7px
/deep/.el-submenu .el-submenu__title:hover
  background-color transparent
/deep/.el-menu
  background none
/deep/.el-submenu .el-menu-item:hover
  background-color transparent
/deep/.el-submenu .el-menu-item.is-active
  background-color transparent
/deep/.el-menu-item, /deep/.el-submenu__title
  line-height 30px
  height 30px
/deep/.el-submenu .el-menu-item
  line-height 20px
  height 20px
.tip-active
  transform translateY(-30px)
  transition all 0.5s ease-out
.mange-device
  width 100%
  height 100vh
  position fixed
  left 0
  top 36px
  background #fff
  .tip
    background-color $auxiliaer-color-5
    -webkit-animation all 2s infinite
    -moz-animation all 2s infinite
    animation all 2s infinite
    height 30px
    display flex
    justify-content space-between
    align-items center
    padding-left 27px
    padding-right 20px
    color #00B597
    font-size 12px
    span
      color #FF6512
    .rt
      cursor pointer
  .tabs-slide
    position relative
    height 100%
    .tabs
      background-color $auxiliaer-color-6
      width 100%
      text-align left
      height 40px
      display flex
      align-items center
      .menus
        display inline-block
        width 10%
        transition all 0.5s ease-in
        margin-right 10px
      .tab-tab-warp
        display flex
        .svg-icon
          width 12px
          height 9px
          // position relative
          // left 9px
          // top -4px
      .menus-active
        width 6%
        transition all 0.5s ease-out
      .tab-tab:hover, .tab-tab:nth-last-child(1):hover, .tab-tab:nth-last-child(2):hover
        border-color #5D5D5D
        background #191919
      .tab-tab
        position relative
        // padding 0 14px
        width 77px
        height 27px
        display flex
        justify-content center
        align-items center
        cursor pointer
        text-align center
        margin-left 6px
        border solid 1px $auxiliaer-color-7
        background $auxiliaer-color-7
        -moz-box-shadow 1px 0px 2px rgba(0, 0, 0, 0.8)
        -webkit-box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        .svg-icon
          width 11px
          height 11px
          vertical-align middle
        .title
          font-size 12px
          color #fff
          margin-left 8px
      .tab-tab:nth-child(3)
        width 97px
      .tab-tab:nth-last-child(1), .tab-tab:nth-last-child(2)
        background #607aa1
      .tab-tab:nth-last-child(2)
        margin-left 20px
      .tab-tab-active
        background #d27c28
      .content
        overflow-y auto
        width 90%
        position absolute
        left 10%
        transition all 0.5s ease-in
        top 40px
        background #fff
      .content-active
        width 86%
        left 6.8%
        transition all 0.5s ease-out
    .slide
      position absolute
      top 0
      width 10%
      min-width 170px
      height 100%
      background #fff
      box-shadow 1px 0px 3px 0px rgba(0, 0, 0, 0.16)
      transition all 0.5s ease-in
      background $auxiliaer-color-5
      z-index 500
      .slide-top
        width 100%
        height 40px
        line-height 38px
        text-align left
        clear both
        box-sizing border-box
        border-bottom 1px solid #484848
        display flex
        align-items center
        span:first-child
          cursor pointer
        .slide-top-title
          font-size 12px
          color #fff
          margin-left 20px
        .menu
          display flex
        .svg-icon:first-child
          width 12px
          height 9px
          position relative
          left 9px
          top -4px
      .el-menu
        background none
        border-right none
        .el-submenu__title
          text-align left
        .svg-icon
          width 12px
          height 12px
          margin-right 10px
        .title
          font-size 12px
          color #fff
          font-weight 500
          width 50px
          text-align left
          display inline-block
        .down
          width 9px
          height 9px
          vertical-align middle
          transition all 0.5s
        .down-active
          transform rotate(180deg)
          transition all 0.5s
        .icon
          width 16px
          height 16px
          margin 0 6px
        .el-menu-item
          font-size 12px
          color #366cca
          font-weight 500
          min-width auto
          // padding-left: 100px !important;
          .sub-title
            width 50px
            display inline-block
            text-align left
            color #fff
        .el-menu-item:nth-child(2n+1)
          background $auxiliaer-color-8
        .el-submenu__icon-arrow
          display none
      .new-device-type
        width 134px
        height 23px
        display flex
        justify-content center
        align-items center
        font-size 11px
        color #737373
        background #2d2d2d
        border-radius 2px
        cursor pointer
        margin 0 auto
        margin-top 20px
        .svg-icon
          margin-right 5px
  .slide-active
    transform translateX(-100%)
    transition all 0.5s ease-out
// 视图
.view-pup-wrap
  position absolute
  top 33px
  left -17px
  width 206px
  background $auxiliaer-color-6
  z-index 60
  color #fff
  padding 20px 15px
  font-size 12px
  .close-btn
    position absolute
    right 0
    top 0
    width 23px
    height 23px
    text-align center
    line-height 23px
    font-size 13px
  .close-btn:hover
    background #c80505
  .search
    height 28px
    width 156px
    /deep/.vxe-input--inner
      border-radius 2px
      outline none
      border solid 1px #797979
      background #555
      color #fff
    i
      color #797979
  .row
    display flex
    justify-content space-between
    margin-top 22px
    cursor pointer
    div:last-child
      text-decoration underline
  /deep/.vxe-checkbox
    color #fff
    line-height 25px
    width 100%
    margin-left 10px
    text-align left
  /deep/.vxe-checkbox>input:checked+.vxe-checkbox--icon+.vxe-checkbox--label
    color #fff
  /deep/.vxe-checkbox>input+.vxe-checkbox--icon
    border none
    width 12px
    height 12px
  /deep/.vxe-checkbox>input:checked+.vxe-checkbox--icon:before
    border 2px solid #00B599
    border-left 0
    border-top 0
  /deep/.vxe-checkbox>input:checked+.vxe-checkbox--icon
    background-color #262626
// 新建
.new-pup-wrap
  position absolute
  top 40px
  left -70px
  width 480px
  z-index 60
  font-size 12px
  border-radius 4px
  moz-box-shadow 0px 0px 4px rgba(0, 0, 0, 0.149019607843137)
  -webkit-box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  /deep/.el-input__inner::-webkit-input-placeholder
    color #000
    font-size 12px
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 10px
    height 36px
    font-size 14px
    color #fff
    background $auxiliaer-color-6
    .rt
      width 23px
      height 23px
      text-align center
      line-height 23px
      font-size 13px
    .rt:hover
      background #c80505
  .body
    background #fff
    padding 0 22px
    .tabs
      display flex
      background #fff
      border-bottom solid 2px #69AEFF
      .item
        width 33.33%
        color #B2B2B2
        font-size 13px
        height 33px
        line-height 33px
        text-align center
        font-weight blod
      .item.active
        color #1269FF
    .tabs-cont
      .row:nth-child(2n+1)
        background #F0F2F4
      .row
        display flex
        align-items center
        height 33px
        .lf
          font-size 12px
          color #000
          width 80px
          text-align right
          margin-left 35px
          margin-right 25px
        .rt
          font-size 12px
          text-align left
          /deep/.el-input__inner
            height 25px
            line-height 25px
            width 236px
            border solid 1px #BDBDBD
            border-radius 0
          /deep/.el-input__icon
            line-height 25px
          .add-btn
            margin-left 8px
    .btn-wrap
      background #fff
      padding 0 22px
      .cancel-btn, .confirm-btn
        width 79px
        height 24px
        line-height 24px
        outline none
        border-radius 5px
        color #fff
        font-size 12px
        border none
        margin 30px 0
      .cancel-btn
        background #BFBFBF
        margin-right 28px
      .confirm-btn
        background #1269FF
      .confirm-btn:disabled
        background #ddd
// 批量修改
.amend-pup-wrap
  position absolute
  top 33px
  left 0
  width 480px
  background $auxiliaer-color-9
  z-index 60
  color #fff
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 2px
    height 28px
    border-bottom solid 1px #797979
    .lf
      font-size 12px
    .rt
      width 23px
      height 23px
      text-align center
      line-height 23px
      font-size 13px
    .rt:hover
      background #c80505
  .body
    display flex
    justify-content space-around
    margin-top 15px
    /deep/.el-input .el-input__inner
      background $auxiliaer-color-8
      border-radius 0
      border none
      height 25px
      color #A2A2A2
    /deep/.el-select .el-input .el-input__inner
      width 150px
    /deep/.el-input .el-input__inner
      width 265px
    /deep/.el-input
      width auto
  .foot
    padding 23px 0
    button
      width 95px
      height 25px
      font-size 12px
      cursor pointer
      color #fff
    button:first-child
      margin-right 44px
      border solid 1px $auxiliaer-color-10
      background $auxiliaer-color-10
    button:last-child
      border solid 1px $auxiliaer-color-11
      background $auxiliaer-color-4
.topology-pup-wrap
  height 36px
  background $auxiliaer-color-6
  position absolute
  z-index 60
  color #fff
  width 100vw
  right 0
  top 33px
  font-size 14px
  font-weight bold
  .close-btn
    position absolute
    right 10px
    top 10px
    width 23px
    height 23px
    text-align center
    line-height 23px
    font-size 13px
    cursor pointer
  .close-btn:hover
    background #c80505
  .topology-cont
    margin 0 auto
    display flex
    align-items center
    width 460px
    height 36px
    .title
      margin-right 25px
    .search
      height 25px
      width 364px
      /deep/.vxe-input--inner
        padding 0 5px
        color #fff
        font-size 12px
        outline none
        border solid 1px #797979
        background $auxiliary-color-1
      /deep/i
        color #797979
// 终端、拓扑结果弹窗
.result-pup
  position fixed
  top 200px
  left 0
  right 0
  margin 0 auto
  width 880px
  background #fff
  z-index 100
  border-radius 4px
  overflow hidden
  -moz-box-shadow 0px 0px 4px rgba(0, 0, 0, 0.149019607843137)
  -webkit-box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  box-shadow 0px 0px 4px rgb(0 0 0 / 15%)
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 2px
    height 36px
    background $auxiliaer-color-6
    color #fff
    .lf
      font-size 14px
    .rt
      width 23px
      height 23px
      text-align center
      line-height 23px
      font-size 13px
      cursor pointer
    .rt:hover
      background #c80505
  .body
    padding 0 20px
.terminal-pup
  width 1000px
/deep/.vxe-table--render-default.border--none .vxe-table--header-wrapper
  background #fff
  font-size 13px
  color #000
  font-weight 700
  border-bottom 2px solid #69aeff
// 表格高度
/deep/.vxe-body--row .vxe-body--column, /deep/.vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  height 34px
  padding 0
/deep/.result-pup .vxe-body--row .vxe-body--column.col-1
  color #1573ff
  font-weight 700
/deep/.result-pup .vxe-body--row .vxe-body--column.col-2
  color #0541C1
  font-weight 400
/deep/.vxe-table--render-default .vxe-body--row.row--stripe
  background #f0f2f4
/deep/.vxe-table--render-default .vxe-header--column
  line-height 34px
/deep/.el-input__inner
  color #000
  // font-weight 700
</style>
